<template>
  <div class='container'>
    <el-dialog title="预览文章" :visible="previewDialog" @close="Cancel">
      <h3 class="title">{{articleDetail.title}}</h3>
      <span>{{articleDetail.createTime|parseTimeByString}}</span>
       <span> 超级管理员 </span>
        <i class="el-icon-view"></i>
        <span> {{articleDetail.visits}}</span>
      <div class="articles" v-html="articleDetail.articleBody"></div>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/articles' // 获取详情接口
export default {
  // 组件名称
  name: 'ArticlesPreview',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {
    previewDialog: {
      type: Boolean,
      default: false
    },
    node: {
      type: [String, Number],
      default: null
    },
    previewData: {
      type: [Object, Array],
      default: null
    }
  },
  // 组件状态值
  data () {
    return {
      articleDetail: [] // 文章预览数据
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () {},
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () {},
  // 组件方法
  methods: {
    // 关闭弹层
    Cancel () {
      this.$emit('update:previewDialog', false)
    },
    // 获取文章详情
    async preview (id) {
      const { data } = await detail({ id: id })
      this.articleDetail = data
      // console.log(this.articleDetail)
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep.el-dialog__body .title {
  margin-top: 10px!important;
}
.articles{
  background-color: #F5F5F5;
  height: auto;
  padding: 20px 5px;
}

</style>
